<template>
	<view class="picker">
		<view class="pickerBg" v-if="pickerModalStatus" @click="hideShareModal"></view>
		<view class="pickerModal" :animation="animationData" v-if="pickerModalStatus">
			<view>选择收货地址</view>
			<view>
				<view :class="showIndex == 0 ? 'select' : ''" @click="anewSelect(0)">{{province.name}}</view>
				<view :class="showIndex == 1 ? 'select' : ''" @click="anewSelect(1)" v-if="showIndex >= 1">{{city.name}}</view>
				<view :class="showIndex == 2 ? 'select' : ''" @click="anewSelect(2)" v-if="showIndex >= 2">{{area.name}}</view>
			</view>
			<view>
				<view v-if="showIndex == 0">
					<scroll-view class="scrollView" scroll-y>
						<view class="scrollViewList">
							<view @click="selectPro(item)" v-for="(item, index) in provinceData" :key="index">
								{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="showIndex == 1">
					<scroll-view class="scrollView" scroll-y>
						<view class="scrollViewList">
							<view @click="selectCity(item)" v-for="(item, index) in cityData" :key="index">{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="showIndex == 2">
					<scroll-view class="scrollView" scroll-y>
						<view class="scrollViewList">
							<view @click="selectaArea(item)" v-for="(item, index) in areaData" :key="index">
								{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData: null,
				pickerModalStatus: false,

				province: {
					id: "",
					name: "请选择"
				},
				city: {
					id: "",
					name: "请选择"
				},
				area: {
					id: "",
					name: "请选择"
				},

				showIndex: 0,
				provinceData: [], // 当前展示的省数据
				cityData: [], // 当前展示的市数据
				areaData: [], //当前展示的区数据
			}
		},
		methods: {
			// 显示对话框
			showPickerModal() {
				let params = {
					pid: 0
				};
				this.$ajax("api/Area/getList", params, "GET", true).then(res => {
					this.showIndex = 0;
					this.provinceData = res.data;
					this.pickerModalStatus = true;
					let animation = uni.createAnimation({
						duration: 300,
						timingFunction: "linear",
						delay: 0
					})
					this.animation = animation;
					animation.translateY("-800rpx").step();
					this.animationData = animation.export();
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},

			//隐藏对话框
			hideShareModal() {
				let animation = uni.createAnimation({
					duration: 300,
					timingFunction: "linear",
					delay: 0
				})
				this.animation = animation;
				animation.translateY("500rpx").step();
				this.animationData = animation.export();
				setTimeout(() => {
					this.pickerModalStatus = false;
				}, 300);
			},

			selectPro(item) {
				this.province = item;
				let params = {
					pid: item.id
				};
				this.$ajax("api/Area/getList", params, "GET", true).then(res => {
					this.cityData = res.data;
					this.showIndex = 1;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},

			selectCity(item) {
				this.city = item;
				let params = {
					pid: item.id
				};
				this.$ajax("api/Area/getList", params, "GET", true).then(res => {
					this.areaData = res.data;
					this.showIndex = 2;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			selectaArea(item) {
				this.area = item;
				const {
					province,
					city,
					area
				} = this;
				this.$emit('conceal', {
					province,
					city,
					area
				})
				this.hideShareModal();
			},

			anewSelect(num) {
				switch (num) {
					case 0:
						this.showIndex = 0;
						this.city = {
							id: "",
							name: "请选择"
						};
						this.area = {
							id: "",
							name: "请选择"
						};
						break;
					case 1:
						this.showIndex = 1;
						this.area = {
							id: "",
							name: "请选择"
						};
						break;
					case 2:
						this.showIndex = 2;
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker {
		width: 100%;

		.pickerBg {
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0.3;
			overflow: hidden;
			background-color: #000;
		}

		.pickerModal {
			position: fixed;
			bottom: -800rpx;
			left: 0;
			right: 0;
			z-index: 33;
			width: 100%;
			height: 800rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0 0;

			>view:nth-of-type(1) {
				width: 100%;
				height: 92rpx;
				font-size: 32rpx;
				font-weight: bolder;
				line-height: 32rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
			}

			>view:nth-of-type(2) {
				width: 100%;
				height: 60rpx;
				padding: 0 20rpx;
				display: flex;
				flex-wrap: nowrap;
				box-sizing: border-box;

				>view {
					height: 60rpx;
					font-size: 28rpx;
					line-height: 60rpx;
					margin-right: 15rpx;
				}

				.select {
					color: red;
					position: relative;

					&::after {
						content: '';
						width: 40rpx;
						height: 6rpx;
						background: red;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
					}
				}
			}

			>view:nth-of-type(3) {
				width: 100%;
				height: calc(100% - 152rpx);

				>view {
					width: 100%;
					height: 100%;

					.scrollView {
						width: 100%;
						height: 100%;

						.scrollViewList {
							width: 100%;
							height: 100%;
							padding: 0 30rpx;
							box-sizing: border-box;

							>view {
								height: 80rpx;
								font-size: 28rpx;
								line-height: 80rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
